<template>
    <div class="register-container animate__animated animate__fadeIn">
        <div class="background-shapes">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
        </div>
        <div class="register-box animate__animated animate__fadeInUp">
            <h2 class="title animate__animated animate__fadeIn animate__delay-1s">用户注册</h2>
            <el-form :model="user" label-width="auto" style="max-width: 600px">
                <el-form-item label="用户名" class="animate__animated animate__fadeInLeft animate__delay-1s">
                    <el-input 
                        v-model="user.username" 
                        placeholder="请输入用户名"
                        :prefix-icon="User"
                        class="custom-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" class="animate__animated animate__fadeInRight animate__delay-1s">
                    <el-input 
                        v-model="user.password" 
                        placeholder="请输入密码"
                        :prefix-icon="Lock"
                        type="password"
                        class="custom-input"
                    ></el-input>
                </el-form-item>
                <div class="btn-group">
                    <el-button type="primary" @click="onSubmit" :loading="loading" class="register-btn animate__animated animate__fadeInUp animate__delay-2s">注册</el-button>
                    <el-button type="info" @click="cancelRegister" class="cancel-btn animate__animated animate__fadeInUp animate__delay-2s">取消</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/request';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import 'animate.css';

const router = useRouter()
const user = ref({
    username: '',
    password: ''
})
const loading = ref(false)
const onSubmit = () => {
    loading.value = true
    axios.post("/user/register", {
        username: user.value.username,
        password: user.value.password
    }).then(res=>{
        ElNotification({
            title: '注册成功， 请登录',
            message: '欢迎来到wfwwb',
            type: 'success',
        })
        router.push("/")
    }).catch(err=>{
        ElNotification({
            title: '注册失败',
            message: err.message,
            type: 'error',
        })
        console.log(err)
    }).finally(()=>{
        loading.value = false
    })
}

const cancelRegister = () => {
    router.push("/")
}
</script>

<style scoped>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #041E42 0%, #0A2D5E 50%, #1A4B8C 100%);
}

.background-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: linear-gradient(45deg, rgba(26, 115, 232, 0.1), rgba(66, 133, 244, 0.1));
    border-radius: 50%;
    animation: float 15s infinite ease-in-out;
}

.shape1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
}

.shape2 {
    width: 400px;
    height: 400px;
    bottom: -200px;
    right: -200px;
    animation-delay: -5s;
}

.shape3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    animation-delay: -7s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(50px, 50px) rotate(90deg); }
    50% { transform: translate(0, 100px) rotate(180deg); }
    75% { transform: translate(-50px, 50px) rotate(270deg); }
}

.register-box {
    width: 380px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.95) 100%);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    text-align: center;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.register-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.47);
}

.title {
    color: #1a73e8;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-input :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(26, 115, 232, 0.2);
}

.custom-input :deep(.el-input__wrapper:hover) {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(26, 115, 232, 0.3);
    border-color: rgba(26, 115, 232, 0.4);
}

.btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.register-btn, .cancel-btn {
    width: 45%;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 12px 20px;
    font-weight: 500;
}

.register-btn {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
    border: none;
}

.register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 115, 232, 0.4);
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
}

.cancel-btn {
    background: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
    border: none;
}

.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(144, 147, 153, 0.4);
    background: linear-gradient(135deg, #90a4ae 0%, #607d8b 100%);
}
</style>